<template>
  <div class="settings page page_padding">
    <div class="row">
      <h1 class="tips">外观</h1>
    </div>
    <div class="row">
      <h3 class="tips">暗黑模式</h3>
      <SwitchButton v-model:active="Store.darkMode" />
    </div>
    <div class="row">
      <h3 class="tips">导航栏自动隐藏</h3>
      <SwitchButton v-model:active="Store.menuAutoFold" />
    </div>
    <br />
    <div class="row">
      <h1 class="tips">快捷键</h1>
    </div>
    <div class="row">
      <h3 class="tips">****</h3>
      <SwitchButton />
    </div>
    <div class="row">
      <h3 class="tips">****</h3>
      <SwitchButton />
    </div>
  </div>
</template>

<script>
import SwitchButton from "../components/SwitchButton.vue";
import { inject } from "vue";

export default {
  components: { SwitchButton },
  setup() {
    const Store = inject('store')
    return { Store }
  }
}
</script>

<style scoped lang="less">
.settings {
  min-height: 100vh;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  & > h1 {
    flex: 1;
    letter-spacing: 2px;
  }

  & > h3 {
    flex: 1;
    font-weight: 300;
    letter-spacing: 2px;
  }
}
</style>